// 页脚组件
const AppFooter = {
  template: `
    <footer class="bg-gray-800 text-white py-8 mt-8">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
            <h3 class="text-lg font-semibold mb-4">关于我们</h3>
            <ul class="space-y-2">
              <li><a href="#" class="text-gray-300 hover:text-white transition-custom">公司简介</a></li>
              <li><a href="#" class="text-gray-300 hover:text-white transition-custom">联系我们</a></li>
              <li><a href="#" class="text-gray-300 hover:text-white transition-custom">招贤纳士</a></li>
            </ul>
          </div>
          <div>
            <h3 class="text-lg font-semibold mb-4">客户服务</h3>
            <ul class="space-y-2">
              <li><a href="#" class="text-gray-300 hover:text-white transition-custom">常见问题</a></li>
              <li><a href="#" class="text-gray-300 hover:text-white transition-custom">退换货政策</a></li>
              <li><a href="#" class="text-gray-300 hover:text-white transition-custom">隐私政策</a></li>
            </ul>
          </div>
          <div>
            <h3 class="text-lg font-semibold mb-4">支付方式</h3>
            <ul class="space-y-2">
              <li><a href="#" class="text-gray-300 hover:text-white transition-custom">在线支付</a></li>
              <li><a href="#" class="text-gray-300 hover:text-white transition-custom">货到付款</a></li>
              <li><a href="#" class="text-gray-300 hover:text-white transition-custom">优惠券使用</a></li>
            </ul>
          </div>
          <div>
            <h3 class="text-lg font-semibold mb-4">关注我们</h3>
            <div class="flex space-x-4">
              <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary transition-custom">
                <i class="fa fa-weixin"></i>
              </a>
              <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary transition-custom">
                <i class="fa fa-weibo"></i>
              </a>
              <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-primary transition-custom">
                <i class="fa fa-instagram"></i>
              </a>
            </div>
            <p class="mt-4 text-gray-300">客服热线：400-123-4567</p>
          </div>
        </div>
        <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400 text-sm">
          <p>&copy; 2025 淘好货. 保留所有权利.</p>
        </div>
      </div>
    </footer>
  `
}
Vue.component('app-footer', AppFooter);